<template>
	<view class="header">
		<!-- 列表 -->
		<view class="list flex" v-for="(item,index) in carlist" :key='index' @click="goPage(item.id)">
			<view class="img">
				<image :src="item.goodImg+'!idx'" mode="aspectFill"></image>
			</view>
			<view class="content">
				<!-- 配置 -->
				<view class="title">
					<text style="font-weight: bold;margin-right: 10rpx;">{{item.car_Type_Name}}</text>
					{{item.configuration_Name}}
				</view>
				<view class="flex type">
					<view v-show="item.proprietary">自营</view>
					<view>巨能降</view>
				</view>
				<view class="guidancePrice flex">指导价：
					<text>{{item.factory_Price}}</text>
					<view class="flex" style="margin-left: 15rpx;"><u-icon name="arrow-downward" color="#38AA0B"></u-icon>
						<view style="color: #38AA0B;font-weight: bold;">{{item.difference.charAt(0)!=='-'?item.difference:0}}</view>
					</view>
				</view>
				<view class="flex price flex-ai-c">
					<view style="margin-right: 10rpx;font-size: 20rpx;">裸车价</view>
					<view><text style="font-size: 28rpx;font-weight: bold;">{{item.client_Price}}</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			carlist: {
				type: Array,
				default: () => []
			}
		},
		data(){
			return {
				
			}
		},
		watch:{
			carlist(val){
				
			}
		},
		methods:{
			goPage(id){
				uni.navigateTo({
					url:'/pages_commodity/giantnengjiangDetails/giantnengjiangDetails?goodid=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header{
		
		.list{
			width: 702rpx;
			margin: 0 auto;
			padding: 38rpx 0 20rpx 0;
			border-bottom: 2rpx solid #EEEEEE;
			
			.img{
				width: 40%;
				height: 136rpx;
				image{
					width: 232rpx;
					height: 136rpx;
					border-radius: 10rpx;
				}
			}
			
			.content{
				width: 60%;
				margin: 0 24rpx;
				
				.title{
					font-size: 28rpx;
					font-weight: 500;
					color: #343434;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				
				.price{
					color: #FC4040;
					font-weight: 500;
				}
				
				//是否类型
				.type{
					margin: 10rpx 0;

					view:first-child{
						width: 60rpx;
						height: 30rpx;
						color: #FFFFFF;
						font-size: 22rpx;
						text-align: center;
						line-height: 30rpx;
						background: #FF4B44;
						border-radius: 5rpx;
					}
					view:last-child{
						margin-right: 15rpx;
						width: 104rpx;
						height: 30rpx;
						color: #FFFFFF;
						font-size: 22rpx;
						text-align: center;
						line-height: 30rpx;
						background: #B5D55E;
						border-radius: 5rpx;
					}
				}
				
				// 指导价
				.guidancePrice{
					margin: 10rpx 0;
					font-size: 22rpx;
					font-weight: 500;
					color: #666666;
					text{
						text-decoration: line-through;
					}
				}
			}
			
		}
	}
</style>
